<template>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header" v-if="title && title.length">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title">{{title}}</h4>
                </div>
                <div class="modal-body">
                    <slot></slot>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">{{close}}</button>
                    <button type="button" class="btn btn-primary" @click="submitModal()">{{submit}}</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    /* eslint-disable no-undef */

    export default {
        name: 'Modal',
        props: {
            title: {type: String},
            close: {type: String, default: '关闭'},
            submit: {type: String, default: '确认'},
            onclose: {type: Function},
            onsubmit: {type: Function},
            show: {type: Boolean, default: false}
        },
        methods: {
            submitModal (e) {
                if (this.onsubmit instanceof Function) {
                    this.onsubmit(this.$el, e);
                }
            },
            switchState (state) {
                switch (state) {
                    case true:
                        $(this.$el).modal('show');
                        break;
                    case false:
                        $(this.$el).modal('hide');
                        break;
                }
            }
        },
        watch: {
            show (val) {
                this.switchState(val);
            }
        },
        mounted () {
            this.switchState(this.show);
            $(this.$el).on('hide.bs.modal', () => {
                if (this.onclose instanceof Function) {
                    this.onclose(this.$el);
                }
            });
        }
    };
</script>
